<template>
	<view class="layout">
		<view class="tab" :class="tabClass">
			<view class="icon">
				<image class="img" :src="tabImage" mode="aspectFill"></image>
			</view>
			<view class="text">{{tabText}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	const props = defineProps({
		soupType: {
			type: Number,
			default: 0
		}
	})

	// 根据不同的类型 加载不同的图片和文本资源
	const tabClass = computed(() => props.soupType === 1 ? 'inspire' : 'snark')
	const tabText = computed(() => props.soupType === 1 ? '心灵鸡汤' : '毒鸡汤')
	const tabImage = computed(() => props.soupType === 1 ? '/static/images/inspire.png' : '/static/images/snark.png')
</script>

<style lang="scss" scoped>
	.layout {
		.tab {
			width: fit-content;
			height: 56rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
			border-radius: 56rpx;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;

				.img {
					width: 80%;
					height: 80%;
				}
			}

			.text {
				padding-left: 10rpx;
			}
		}

		.inspire {
			background: #FFF3F7;

			.icon {
				background: linear-gradient(to right, #f83162, #ff7795);
			}
		}

		.snark {
			background: #EDFDF0;

			.icon {
				background-image: linear-gradient(to right, #4F9153, #4bbb8b);
			}
		}

	}
</style>